<template>
    <div class="basicInfoList basicInfoLayout">
        <div v-for="(basicItem,index) in basicData" :key="index">
            <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">{{basicItem.title}}</div>
            </div>
            <ul>
                <li v-for="(ele,status) in basicItem.basicDataChild" :key="status" v-if="ele.status == 'basic'" class="basic">
                    <label>{{ele.label}}</label>
                    <span>{{ele.value}}</span>
                </li>
                <li v-for="(ele,status) in basicItem.basicDataChild" :key="status" v-if="ele.status == 'card'" class="card">
                    <h2>{{ele.label}}</h2>
                </li>
                <li v-for="(ele,status) in basicItem.basicDataChild" :key="status" v-if="ele.status == 'patternCard'" class="patternCard">
                    <h2>{{ele.value}}</h2>
                    <span>{{ele.label}}</span>
                </li>
                <!-- <li v-for="(ele,status) in basicItem.basicDataChild" :key="status" v-if="ele.status == 'table'" style="width:100%">
                    <el-table>
                        <el-table-column v-for="(tableth,indexTh) in ele.tableHead" :key="indexTh" :label="tableth.operation" :fixed="tableth.fixed" >
                        </el-table-column>
                        <el-table-column
						fixed="right"
						label="备注">
						</el-table-column>
                    </el-table>
                </li> -->
                <!-- <li v-for="(ele,status) in basicItem.basicDataChild" :key="status">
                    <div v-if="ele.status == 'basic'">
                        <label>{{ele.label}}</label>
                        <span>{{ele.value}}</span>
                    </div>
                    <div v-else-if="ele.status == 'card'">
                        <h2>{{ele.label}}</h2>
                    </div>
                    <div v-else-if="ele.status == 'table'">
                        <el-table>
                            <el-table-column v-for="(tableth,indexTh) in ele.tableHead" :label="tableth.operation" >
                               
                            </el-table-column>
                        </el-table>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'basicInfo',
    data(){
        return{
            
        }
    },
    props: ["basicData"],
}
</script>

<style scoped>
    .basicInfoLayout{
        background-color: #fff;
        border-radius: 8px 8px 0 0;
        padding-bottom: 16px;
    }
	.basicInfoLayout ul{
		padding: 0 30px
	}
	.basicInfoLayout ul li.basic{
		width: 24%;
		display: inline-block;
		margin-bottom: 14px
    }
    .basicInfoLayout ul li.card{
        display: inline-block;
		margin-right: 24px
    }
    .basicInfoLayout ul li.card:last-child{
		margin-right: 0
    }
	.basicInfoLayout ul li label{
		color: #888
	}
    .basicInfoLayout ul li span{
        color: #222
    }
    .basicInfoLayout ul li.card h2{
        display: inline-block;
        width: 214px;
        height: 74px;
        background-color: #eee;
        text-align: center;
        line-height: 74px;
        background-image: linear-gradient(-40deg, #7b5e43 0%, #96765a 100%), 
	    linear-gradient(#7e6b5a, #7e6b5a);
        background-blend-mode: normal, normal;
        border-radius: 4px;
        color: #fff;
    }
    .basicInfoLayout ul li.patternCard{
        width: 326px;
        width: 24%;
        display: inline-block;
        margin-right: 22px;
        color: #fff;
        text-align: center;
        padding: 26px 0;
    }
    .basicInfoLayout ul li.patternCard:first-child{
        background-image: linear-gradient(-90deg, 
		#9db919 0%, 
		#bcc92b 100%), 
        linear-gradient(#ffffff, #ffffff);
        background-blend-mode: normal, normal;
    }
    .basicInfoLayout ul li.patternCard:nth-child(2){
        background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%), 
        linear-gradient( #e67828, #e67828);
        background-blend-mode: normal, normal;
    }
    .basicInfoLayout ul li.patternCard:nth-child(3){
        background-image: linear-gradient(-90deg, #eab71b 0%, #edcb2a 100%), 
        linear-gradient(#eab91d, #eab91d);
        background-blend-mode: normal, normal;
    }
    .basicInfoLayout ul li.patternCard:last-child{
         margin-right: 0
    }
    .basicInfoLayout ul li.patternCard h2{
        font-size: 34px;
        margin-bottom: 26px;
    }
    .basicInfoLayout ul li.patternCard span{
        color: #fff;
        font-size: 16px
    }
    .flexLayout{
        display: flex;
        display: -webkit-flex;
        justify-content: center
    }
</style>


